/**
* @Description: 客户管理智科
* @author  qgj
* @date 
*/
<template>
  <div class="app-containers">
    <query-table-render
        ref="queryTable"
        :query-model="queryModel"
        :table-request="requestTableData"
        :table-column="tableColumns"
        :toolbar-render="toolbarRnd"
        :transform-query="transformQuery"
        :title-render="titleRender"
        @on-operator="onOperator"
    >
      <template v-slot:form>
        <el-form-item label="客户分类" prop="type">
          <el-select v-model="queryModel.type" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_customer_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="ERP状态" prop="erpStatus">
          <el-select v-model="queryModel.erpStatus" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_customer_erp_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="客户状态" prop="status">
          <el-select v-model="queryModel.status" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_customer_system_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="queryModel.name" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="授权协议号" prop="licenseAgreementNumber">
          <el-input v-model="queryModel.licenseAgreementNumber" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="结算方式" prop="settlement">
          <el-select v-model="queryModel.settlement" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_customer_settlement"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="业务部门" prop="businessDeptName">
          <el-input v-model="queryModel.businessDeptName" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="业务人员" prop="businessUserName">
          <el-input v-model="queryModel.businessUserName" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="queryModel.orderType" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.order_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否采购" prop="supportedBuyout">
          <el-select v-model="queryModel.supportedBuyout" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.business_yes_no"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item> -->
      </template>
    </query-table-render>
  </div>
</template>

<script>
import QueryTableRender from "@/components/QueryTableRender";
import { listCustomer, } from "@/api/basic/customer";
import {checkPermi} from '@/utils/permission.js'
// import {getOrderTerminalList} from "@/api/costManagement";
// import DialogCostEdit from "@/views/costManagement/components/DialogCostEdit";
import dayjs from "dayjs"

export default {
  name: "CustomerManage",
  components: {QueryTableRender},
  dicts: ['basic_data_customer_type','basic_data_customer_system_status',
  'basic_data_customer_erp_status','basic_data_customer_settlement','business_yes_no','order_type'],
  data() {
    return {
      queryModel: {
        type: '', // 客户分类
        erpStatus: '', // ERP状态
        status: '', // 客户状态
        name: '', // 客户名称
        licenseAgreementNumber: '', // 授权协议号
        settlement: '', // 结算方式
        businessDeptName: '', // 归属业务部门
        businessUserName: '', // 归属业务人员
        orderType: '', // 订单类型
        // supportedBuyout:'',// 是否支持采购 false否 true是
      },
      tableColumns: [
        {
          label: '序号',
          width: '60',
          type: 'index',
          increment: true
        },
        {
          prop: 'code',
          label: 'ERP客户编号',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'name',
          label: '客户名称',
          minWidth: '180',
          showOverflowTooltip:true
        },
        {
          prop: 'type',
          label: '客户分类',
          minWidth: '120',
          type:'select',
          render: (h, text) => {
            let show = "";
            this.dict.type.basic_data_customer_type.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'erpStatus',
          label: 'ERP使用状态',
          type: 'select',
          width: '120',
          valueEnum: {
              '00': { text: '可用' },
              '01': { text: '禁用' },
              '02': { text: '反审核中' },
          }
          // options: [
          //   {value: 'DISABLE', label: '启用', type: 'success'},
          //   {value: 'DISABLE', label: '禁用', type: 'danger'},
          // ],
          // render: (h,text, {selectOption}) => {
          //   return <el-tag type={selectOption.type}>{text}</el-tag>
          // }
        },
        {
          prop: 'creditCode',
          label: '统一社会信用代码',
          minWidth: '160',
          showOverflowTooltip:true
        },
        {
          prop: 'contactName',
          label: '联系人',
          minWidth: '120',
        },
        {
          prop: 'contactMobile',
          label: '联系人电话',
          minWidth: '120',
        },
        {
          prop: 'licenseAgreementNumber',
          label: '授权协议号',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'settlement',
          label: '结算方式',
          minWidth: '120',
          type:'select',
          valueEnum: {
              'CURRENT_SETTLEMENT': { text: '现结' },
              'MONTHLY_SETTLEMENT': { text: '月结' },
          }
        },
        {
          prop: 'status',
          label: '客户状态',
          minWidth: '120',
          type:'select',
          valueEnum: {
              'UN_CONFIRMED': { text: '待确认' },
              'VALID': { text: '生效' },
              'INVALID': { text: '失效' },
          }
        },
        {
          prop: 'supportOrderTypesName',
          label: '订单类型',
          minWidth: '120',
          showOverflowTooltip:true
          // type:'select',
          // valueEnum: {
          //     'DISTRIBUTION': { text: '铺货订单' },
          //     'PURCHASE': { text: '采购订单' },
          //     'ACTIVITY': { text: '活动订单' },
          // }
        },
        {
          prop: 'businessDeptName',
          label: '归属业务部门',
          minWidth: '120',
        },
        {
          prop: 'businessUserName',
          label: '归属业务人员',
          minWidth: '120',
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '120',
          showOverflowTooltip:true,
        },
        // {
        //   prop: 'price',
        //   label: '部标机费用(元)',
        //   minWidth: '180',
        //   type: "money",
        //   align: "right",
        //   className: 'custom-money-column'
        // },
        // {
        //   prop: 'mode',
        //   label: '费用模式',
        //   type: 'select',
        //   minWidth: '120',
        //   options: modeOptions
        // },
        {
          label: '操作',
          width: '160',
          type: 'operator',
          fixed: 'right',
          operators: this.operatorsFunc()
          // [
          //   {label: '修改', command: 'edit', },
          //   {label: '详情', command: 'check', }
          // ]
        },
      ],
    }
  },
  watch: {
    $route() {
        this.onRefreshTable();
    },
  },
  methods: {
    onRelatedOperator(val) {
      console.log(val)
    },
    toolbarRnd(h){
      // return <el-button type="primary" icon="el-icon-plus" vOn:click={() => this.onAddCost()}>配置可用价目表</el-button>
    },
    /**
     * 操作列表
     */
    operatorsFunc() {
      let list = [];
      if (checkPermi(['basic-data:customer:edit'])) {
        list.push({label: '修改', command: 'edit'});
      }
      if(checkPermi(['basic-data:customer:detail'])){
        list.push({label: '详情', command: 'check', })
      }
      return list;
    },
    titleRender(h) {
      return <div>
        <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
        <span style="display: inline-block; color: #333333; font-size: 16px;">客户管理</span>
      </div>;
    },
    transformQuery(queryData) {
      let transParams = {}
      for (let keyName in queryData) {
        if (queryData.hasOwnProperty(keyName)) {
          if (keyName === 'createTimeRange') {
            if(queryData['createTimeRange'] && queryData['createTimeRange'].length){
              const [start, end] =  queryData[keyName]
              transParams['startTime'] = dayjs(start).startOf('day').format("YYYY-MM-DD HH:mm:ss")
              transParams['endTime'] = dayjs(end).endOf('day').format("YYYY-MM-DD HH:mm:ss")
            }
          } else {
            transParams[keyName] = queryData[keyName]
          }
        }
      }
      return transParams
    },
    onOperator(command, record) {
      if('edit' === command){
        this.onPreviewInvoice(record)
      }else if('check' === command){
        this.checkInfo(record)
      }
    },
    //编辑
    onPreviewInvoice(record) {
      console.log(record)
      this.$router.push({path:"CustomerManageEdit",query:{customerId:JSON.stringify(record.id)}});
    },
    //详情
    checkInfo(record) {
      this.$router.push({path:"CustomerManageDetail",query:{customerId:JSON.stringify(record.id)}});
    },
    filterCustomerData(query, item) {
      return item.pinyin.indexOf(query) > -1;
    },
    requestTableData(queryParams) {
      return listCustomer(queryParams).then(respData => {
          return {
            success: true,
            total: respData.data.total,
            data: respData.data.records,
          }
        }
      );
    },
    onRefreshTable(){
      this.$refs['queryTable'].refreshTable()
    },
  }
}
</script>
<style lang="css"> 
/* .el-tooltip__popper{ max-width:30% }  */
</style>